<template>
	<view class="page">
		<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
		<me-tabs v-model="tabIndex" :tabs="tabs"></me-tabs>
		<swiper :style="{ height: height }" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab, i) in tabs" :key="i"><mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height"></mescroll-item></swiper-item>
		</swiper>
	</view>
</template>

<script>
import MescrollItem from '@/components/question/Question.vue';
import MeTabs from '@/components/me-tabs/me-tabs.vue';
import { getCodeList } from '@/utils/dict.js';
export default {
	components: {
		MescrollItem,
		MeTabs
	},
	computed: {
		isLogin() {
			return this.$store.state.user.isLogin
		} 
	},
	data() {
		return {
			height: '', // 需要固定swiper的高度
			tabs: [],
			tabIndex: 0 // 当前tab的下标
		};
	},
	onShareAppMessage() {
		return {};
	},
	async onLoad() {
		this.navTo()
		// 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
		this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(64) + 'px';
		const tabs = await getCodeList('STU_CATEGORY');
		this.tabs = [
			{
				name: '全部',
				value: ''
			},
			...tabs
		];
	},
	onShow() {
		// 返回刷新: https://www.mescroll.com/uni.html#note 第二点
		// if(this.canReset){
		// 	let curMescroll = this.getMescroll(this.tabIndex)
		// 	curMescroll && curMescroll.resetUpScroll()
		// }
		// this.canReset = true
	},
	methods: {
		// 轮播菜单
		swiperChange(e) {
			this.tabIndex = e.detail.current;
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			if (!this.isLogin) {
				url = '/pages/login/index';
			}
			uni.navigateTo({
				url
			});
		},
		// 获取指定下标的mescroll对象
		// getMescroll(i){
		// 	let mescrollItems = this.$refs.mescrollItem;
		// 	if(mescrollItems){
		// 		let item = mescrollItems[i]
		// 		if(item) return item.mescroll
		// 	}
		// 	return null
		// }
	}
};
</script>

<style scoped lang="scss">
.page {
	background-color: #f3f3f3;
	min-height: 100vh;
}
</style>
